<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order.applyRefund }}</view>
				<view></view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="u-m-t-12">
			<orderlist-card v-if="[1,2,3,4,6,8].includes(dataInfo.orderType)" :item="dataInfo" :show-button="false" :show-status="false"></orderlist-card>
			<view v-else-if="[5,7].includes(dataInfo.orderType)" class="">
				<view style="padding: 20rpx 0;background-color: #FFFFFF;">
					<view style="padding: 0 20rpx 0 38rpx;">
						<view class="flex-center-between u-p-b-16">
							<view class="u-p-l-12 flex-center">
								<view class="u-avatar-34 clear-flex">
									<x-image :src="showImage(dataInfo.merchantLogoImgUrl, 'logo')" />
								</view>
								<view class="u-m-l-8 u-f-28 u-lh-40 font-medio">{{ dataInfo.merchantName || 'Dondego' }}</view>
							</view>
						</view>
					
						<!-- 分割线 -->
						<u-gap height="1" bgColor="#EEEEEE"></u-gap>
					</view>
					<!-- 卡片 -->
					<view>
						<coupon-card :item="({ ...dataInfo, couponType: 5 })" disabled></coupon-card>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 选项 -->
		<view
		class="bg-white u-m-t-10"
		style="padding: 36rpx 20rpx 46rpx 36rpx;">
			<view class="flex-center-between">
				<view class="u-f-32 u-lh-44 font-medio">{{ lang_order.saledRefundOrigin }}</view>
				<view
				class="flex-center "
				@click="visible = true"
				>
					<view :class="['u-m-r-20', refundIndex > -1 ? '' : 'color-grew']">{{ refundIndex > -1 ? lang_order[refundObj.labelKey] : lang_common.pleaseSelect }}</view>
					<u-icon name="right" custom-prefix="u" color="#ACACAC" size="24"></u-icon>
				</view>
			</view>
			 
			<view class="u-m-t-58 flex-center-between">
				<view class="u-f-32 u-lh-44 font-medio">{{ lang_order[`saledRefund${ dataInfo.payType === 1 ? 'Score' : 'Cash' }`] }}</view>
				<view class="u-p-r-46 u-f-32 u-lh-38 font-bold color-red">{{ dataInfo.payType === 1? `${ (dataInfo.totalIntegral || 0) + lang_common.score }` : `${ lang_unit.money + (dataInfo.totalAmount || 0) }` }}</view>
			</view>
		</view>
		
		<!-- 补充描述 -->
		<view
		class="bg-white u-m-t-10"
		style="padding: 36rpx 0 46rpx;">
			<view style="padding: 0 30rpx;">
				<view class="u-f-34 u-lh-48 font-medio">{{ lang_personal.otherDescription }}({{ lang_common.optional }})
				</view>
				<view class="u-p-t-28 description-container">
					<textarea v-model="form.remark" resize="none" :rows="7" maxlength="200"
						:placeholder="lang_personal.otherDescriptionTips" style="width: 100%" />
				</view>
			</view>
			<!-- 图片视频 -->
			<view
			class="u-m-t-30"
			style="padding: 0 30rpx;"
			>
				<x-upload :limit-video-count="0" @change="changeFile" @fail="settingValue = 'camera'"></x-upload>
			</view>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx"></view>
		
		<x-fixed-bottom
		v-if="!keyboardHeight"
		background="rgba(0,0,0,0)">
			<view class="flex-center-center u-p-b-40">
				<x-common-btn @click="submitAction" :disabled="!authSubmit">{{ lang_common.done }}</x-common-btn>
			</view>
		</x-fixed-bottom>
		
		<!-- 选项弹窗 -->
		<x-popup v-model="visible" mode="bottom" z-index="999999" @close="visible = false" safe-area-inset-bottom>
			<view class="score-container u-p-t-38">
				<!-- 头部 -->
				<view class="score-header flex-between">
					<image src="@/static/image/common/close_grew.png" style="width: 30rpx; height: 28rpx;"
						class="clear-flex" @click="visible = false"></image>
					<view class="common-title u-text-center u-f-36 u-lh-50 font-medio">{{ lang_order.saledRefundOrigin }}</view>
				</view>
		
				<!-- 分割线 -->
				<u-gap height="3" bgColor="#F9F9F9"></u-gap>
		
				<!-- 充值方式选项 -->
				<view class="u-p-t-20">
					<view v-for="(item, index) in refunds" :key="index" class="pay-item flex-center-between"
						@click="selectAction(index)">
						<view class="flex-center">
							<view>{{ lang_order[item.labelKey] }}</view>
						</view>
		
						<image v-if="refundIndex === index" src="@/static/image/common/circle_checked.png"
							style="width: 32rpx; height: 32rpx;" class="clear-flex"></image>
					</view>
				</view>
			</view>
		</x-popup>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { refundApply } from '@/api/user/saled.js'
	export default {
		data() {
			return {
				visible: false,
				refunds: [],
				refundIndex: -1,
				
				form: {
					remark: '',
					filelist: [],
				},
				orderNumber: '',
				refundAction: '',
				dataInfo: {},
				isClick: false,
				settingValue: ''
			}
		},
		computed: {
			authSubmit() {
				if (this.refundIndex === -1 || !this.form.filelist.length) {
					return false
				}
				return true
			},
			refundObj() {
				return this.refunds[this.refundIndex] || {}
			}
		},
		onLoad({ orderNumber, refundAction }) {
			this.orderNumber = orderNumber
			this.refundAction = refundAction
			console.log(this.refundAction)
			let event = this.getOpenerEventChannel();
			event.on('saled-refund', (dataInfo) => {
				this.dataInfo = dataInfo
			})
			let refunds = [
				{ labelKey: 'refundOrigin1', label: '不想要了', value: 1 },
				{ labelKey: 'refundOrigin2', label: '协商一致退款', value: 2 },
				{ labelKey: 'refundOrigin3', label: '发货慢', value: 3 },
				{ labelKey: 'refundOrigin4', label: '地址/信息填写错误', value: 4 }
			]
			this.refunds = refunds
		},
		methods: {
			// 媒体文件变动后
			changeFile(file) {
				this.form.filelist = file
			},
			// 选择退款原因
			selectAction(index) {
				this.refundIndex = index
				this.visible = false
			},
			// 提交申请
			submitAction() {
				let { filelist, remark } = this.form
				if (this.refundIndex === -1) {
					return this.$api.msg(this.lang_order.saledRefundOriginTips)
				} else if (!filelist.length) {
					return this.$api.msg(this.lang_order.saledRefundPictureTips)
				}
				let action = this.lang_order[this.refundObj.labelKey]
				let imgUrls = filelist.map(item => item.fileUrl).join(',')
				let queryObj = { action, imgUrls, orderNumber: this.orderNumber, refundAction: this.refundAction, remark,  } 
				if (this.isClick) return;
				this.isClick = true
				refundApply(queryObj).then(() => {
					this.$api.msg('提交成功')
					let timer = setTimeout(() => {
						this.isClick = false
						uni.navigateBack({
							delta: 2
						})
					}, 1000)
				}).catch(() => { this.isClick = false })
			}
		}
	}
</script>

<style scoped lang="scss">
	.score {
		&-header {
			position: relative;
			padding: 0 32rpx;
		}
	
		&-container {
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #FFFFFF;
		}
	
		&-item-card {
			width: 210rpx;
			height: 210rpx;
			border: 6rpx solid #F9F9F9;
			border-radius: 30rpx;
	
			&-active {
				border-color: #FD1E43
			}
		}
	}
	.pay {
		&-item {
			padding: 26rpx 38rpx 26rpx 56rpx;
			border-bottom: 2rpx solid #f9f9f9;
		}
	}
	
	.description-container {
		height: 200rpx;
	}
</style>
